<template>
  <div class="overflow-hidden">
    <n-card title="" :bordered="false" class="h-full rounded-8px shadow-sm">
      <div class="flex-col h-full">
        <n-space class="pb-12px" justify="space-between">
          <n-space>
            <n-date-picker v-model:formatted-value="date" value-format="yyyy-MM-dd" type="date" clearable />
            <n-select style="width: 200px;" v-model:value="time_slot" :options="options" />
            <n-button type="primary" @click="handleAddTable"> 查询 </n-button>
          </n-space>
          <n-space>
            <div class="color-red-600">剧名: {{ route.query.duanju_name }} 剧集: {{ route.query.episodes }} 渠道: {{ route.query.platform }}</div>
          </n-space>
        </n-space>
        <n-card title="当日数据" style="margin-bottom: 10px">
          <div class="container">
            <div>
              <span>当日浏览量</span>
              <br />
              <count-to :start-value="0" :end-value="info.currentDayViews" :decimals="2" class="style36" />
            </div>
            <div>
              <span>当日新增浏览量</span>
              <br />
              <count-to :start-value="0" :end-value="info.currentDayAddViews" :decimals="2" class="style36" />
            </div>
            <div>
              <span>当日收益</span>
              <br />
              <count-to :start-value="0" :end-value="info.currentDayIncome" :decimals="2" class="style36" />
            </div>
          </div>
        </n-card>
        <n-card title="7天数据" style="margin-bottom: 10px">
          <div class="container">
            <div>
              <span>7日浏览量</span>
              <br />
              <count-to :start-value="0" :end-value="info.sevenDayViews" :decimals="2" class="style36" />
            </div>
            <div>
              <span>7日新增浏览量</span>
              <br />
              <count-to :start-value="0" :end-value="info.sevenDayAddViews" :decimals="2" class="style36" />
            </div>
            <div>
              <span>7日收益</span>
              <br />
              <count-to :start-value="0" :end-value="info.sevenDayIncome" :decimals="2" class="style36" />
            </div>
          </div>
        </n-card>
        <n-card title="30天数据" style="margin-bottom: 10px">
          <div class="container">
            <div>
              <span>30日浏览量</span>
              <br />
              <count-to :start-value="0" :end-value="info.thirtyDayViews" :decimals="2" class="style36" />
            </div>
            <div>
              <span>30日新增浏览量</span>
              <br />
              <count-to :start-value="0" :end-value="info.thirtyDayAddViews" :decimals="2" class="style36" />
            </div>
            <div>
              <span>30日收益</span>
              <br />
              <count-to :start-value="0" :end-value="info.thirtyDayAddIncome" :decimals="2" class="style36" />
            </div>
          </div>
        </n-card>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref } from "vue";
import { selectOperatorLinksData } from "@/service";
import { useBoolean, useLoading } from "@/hooks";
import { useRoute, useRouter } from "vue-router";

const { loading, startLoading, endLoading } = useLoading(false);
const { bool: visible, setTrue: openModal } = useBoolean();
const route = useRoute();
const router = useRouter();

// 日期
let date = ref(null);

// 时间段
let time_slot = ref('');
const options: any = ref([
  {
    label: "全天",
    value: ''
  },
  {
    label: "02:00-06:00",
    value: '02:00-06:00'
  },
  {
    label: "06:00-10:00",
    value: '06:00-10:00'
  },
  {
    label: "10:00-14:00",
    value: '10:00-14:00'
  },
  {
    label: "14:00-18:00",
    value: '14:00-18:00'
  },
  {
    label: "18:00-22:00",
    value: '18:00-22:00'
  },
  {
    label: "22:00-02:00",
    value: '22:00-02:00'
  }
])
// 查询
function handleAddTable() {
  getSelectDuanjuDetailData();
}

let info = ref({
  currentDayAddViews: 0,
  currentDayIncome: 0,
  currentDayViews: 0,
  sevenDayAddViews: 0,
  sevenDayIncome: 0,
  sevenDayViews: 0,
  thirtyDayAddIncome: 0,
  thirtyDayAddViews: 0,
  thirtyDayViews: 0,
});
// 获取明细
async function getSelectDuanjuDetailData() {
  startLoading();
  let params = {
    duanju_id: route.query.duanju_id,
    episodes: route.query.episodes,
    platform: route.query.platform,
    date: date.value,
    time_slot: time_slot.value
  };
  let { data } = await selectOperatorLinksData(params);
  info.value = data
  endLoading();
}
function init() {
  getSelectDuanjuDetailData();
}

// 初始化
init();
</script>

<style scoped>
.container {
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.container>div {
  text-align: center;
}

.style36 {
  color: red;
  font-size: 30px;
  font-weight: bold;
}
</style>
